<template>
	<div>
		<TopHeader></TopHeader>
		<div class="warp">
			<div class="heaaderRow">
				{{ $t("message.lineNumberAss.title") }}
			</div>
			<div class="menuesRow">
				<div class="leftView">
					<div v-for="(downItem, index) in topMsBtnDownList" :key="index" class="headItem">
						<el-dropdown>
							<span class="el-dropdown-link">
								<button>
									{{ downItem.topBtnName }}
								</button>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item v-for="(dropdownItem, dropdownIndex) in downItem.downList"
									:key="dropdownIndex" @click.native="dropDownMenu(dropdownItem, downItem.type)">
									<button :disabled="!dropdownItem.disabled" class="drop-btn">
										{{ dropdownItem.itemName }}
									</button>
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
					<div class="headItem">
						<span>装置 : </span>
					</div>
					<el-input></el-input>

				</div>
				<div class="rightView">
					<!-- <el-button type="primary" size="mini">マークアッア</el-button> -->
				</div>
			</div>
			<div class="infoRow">
				<div class="leftView">
					<LineLeftView ref="LineList" @changeRelaNum="changeRelaNum"></LineLeftView>
				</div>
				<div class="rightView">
					<div class="tableMenuView">
						<span class="">{{ $t("message.lineNumberAss.tip.lab1") }}</span>
						<el-input class="ipt_shot" v-model="relaNum"></el-input>
						<span class="">{{ $t("message.lineNumberAss.tip.lab2") }}</span>
						<el-button type="primary" size="mini">{{ $t("message.lineNumberAss.tip.lab3") }}</el-button>
						<span class="">{{ $t("message.lineNumberAss.tip.lab4") }}</span>
						<el-input class="ipt_long" placeholder="请输入搜索内容"></el-input>
						<i class="el-icon-search"></i>
						<span class="iconfont">&#xec7c;</span>

					</div>
					<ux-grid ref="multipleTable" :data="allInfo" style="width: 100%;" :header-cell-style="{
						color: 'rgba(0, 0, 0)',
						fontSize: '14px',
						textAlign: 'center',
						fontWeight: '700',
						padding: 0,
						height: '32px',
					}" :cell-style="{
	color: 'rgba(96,98,102,1)',
	fontSize: '14xpx',
	textAlign: 'left',
	padding: 0,
	height: '32px',
}" :height="tabHeight" max-width="200" :checkbox-config="{
	showHeader: true,
}">
						<template slot="empty"> No data </template>
						<ux-table-column type="checkbox" width="38"> </ux-table-column>
						<ux-table-column :title="$t('message.lineNumberAss.tableHeads.title_1')" width="50">
							<template slot-scope="scope">
								<!-- <p class="t-center">{{ scope.row.PCODNAME }}</p> -->
								<p class="t-center">運用</p>
							</template>
						</ux-table-column>
						<ux-table-column :title="$t('message.lineNumberAss.tableHeads.title_2')" width="260">
							<template slot-scope="scope">
								<p class="t-center">P-002-01</p>
							</template>
						</ux-table-column>
						<ux-table-column :title="$t('message.lineNumberAss.tableHeads.title_3')" width="160">
							<template slot-scope="scope">
								<p class="t-center">運用</p>
							</template>
						</ux-table-column>
						<ux-table-column :title="$t('message.lineNumberAss.tableHeads.title_4')" width="160">
							<template slot-scope="scope">
								<p class="t-center">運用</p>
							</template>
						</ux-table-column>
						<ux-table-column :title="$t('message.lineNumberAss.tableHeads.title_5')" width="100">
							<template slot-scope="scope">
								<p class="t-center">運用</p>
							</template>
						</ux-table-column>
						<ux-table-column :title="$t('message.lineNumberAss.tableHeads.title_6')" width="120"
							field="address" :filters="[{ label: 'tset', value: '1' }]" :filter-multiple="false">
							<template slot-scope="scope">
								<p class="t-center">運用</p>
							</template>
						</ux-table-column>
						<ux-table-column :title="$t('message.lineNumberAss.tableHeads.title_7')" width="120">
							<template slot-scope="scope">
								<p class="t-center">運用</p>
							</template>
						</ux-table-column>
						<ux-table-column :title="$t('message.lineNumberAss.tableHeads.title_8')" width="160">
							<template slot-scope="scope">
								<p class="t-center">運用</p>
							</template>
						</ux-table-column>
						<ux-table-column :title="$t('message.lineNumberAss.tableHeads.title_9')" width="120">
							<template slot-scope="scope">
								<p class="t-center">運用</p>
							</template>
						</ux-table-column>
						<ux-table-column :title="$t('message.lineNumberAss.tableHeads.title_10')" width="100">
							<template slot-scope="scope">
								<p class="t-center">運用</p>
							</template>
						</ux-table-column>
						<ux-table-column :title="$t('message.lineNumberAss.tableHeads.title_10')" width="100">
							<template slot-scope="scope">
								<p class="t-center">運用</p>
							</template>
						</ux-table-column>
						<ux-table-column :title="$t('message.lineNumberAss.tableHeads.title_12')" width="100">
							<template slot-scope="scope">
								<p class="t-center">運用</p>
							</template>
						</ux-table-column>
						<ux-table-column :title="$t('message.lineNumberAss.tableHeads.title_13')" width="100">
							<template slot-scope="scope">
								<p class="t-center">運用</p>
							</template>
						</ux-table-column>
						<ux-table-column :title="$t('message.lineNumberAss.tableHeads.title_14')" width="100">
							<template slot-scope="scope">
								<p class="t-center">運用</p>
							</template>
						</ux-table-column>
						<ux-table-column :title="$t('message.lineNumberAss.tableHeads.title_15')" width="100">
							<template slot-scope="scope">
								<p class="t-center">運用</p>
							</template>
						</ux-table-column>
						<ux-table-column :title="$t('message.lineNumberAss.tableHeads.title_16')" width="100">
							<template slot-scope="scope">
								<p class="t-center">運用</p>
							</template>
						</ux-table-column>
						<ux-table-column :title="$t('message.lineNumberAss.tableHeads.title_17')" width="100">
							<template slot-scope="scope">
								<p class="t-center">運用</p>
							</template>
						</ux-table-column>
						<ux-table-column :title="$t('message.lineNumberAss.tableHeads.title_18')" width="100">
							<template slot-scope="scope">
								<p class="t-center">運用</p>
							</template>
						</ux-table-column>
						<ux-table-column :title="$t('message.lineNumberAss.tableHeads.title_19')" width="100">
							<template slot-scope="scope">
								<p class="t-center">運用</p>
							</template>
						</ux-table-column>
						<ux-table-column :title="$t('message.lineNumberAss.tableHeads.title_20')" width="100">
							<template slot-scope="scope">
								<p class="t-center">運用</p>
							</template>
						</ux-table-column>
						<ux-table-column :title="$t('message.lineNumberAss.tableHeads.title_21')" width="160">
							<template slot-scope="scope">
								<p class="t-center">運用</p>
							</template>
						</ux-table-column>
					</ux-grid>
					<div class="tableBottom">
						{{ $t('message.lineNumberAss.tableHeads.title_22') }} =703
						{{ $t('message.lineNumberAss.tableHeads.title_23') }}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import TopHeader from "@/components/header/Head.vue";
import LineLeftView from "./LineLeftView.vue";
import $ from "jquery";
export default {
	components: {
		TopHeader,
		LineLeftView
	},
	name: "LineContent",
	data() {
		return {
			relaNum: 0,
			topMsBtnDownList: [
				{
					topBtnName: this.$t("message.bhView.topBtnDownList.printing"),
					downList: [
						{
							itemName: this.$t("message.bhView.topBtnDownList.print_preview"),
							disabled: false,
						}
					]
				},
				{
					topBtnName: ' 閲覧 ',
					downList: [
						{
							itemName: this.$t("message.bhView.topBtnDownList.addition"),
							disabled: false,
						},
						{
							itemName: this.$t("message.bhView.topBtnDownList.delete"),
							disabled: false,
						},
						{
							itemName: this.$t("message.bhView.topBtnDownList.detail"),
							disabled: false,
						},
						{
							itemName: this.$t("message.bhView.topBtnDownList.markup"),
							disabled: false,
						}
					]
				},
				{
					topBtnName: this.$t("message.bhView.topBtnDownList.data"),
					type: "MS",
					downList: [
						{
							itemName: this.$t("message.bhView.topBtnDownList.processing"),
							disabled: false,
						}
					]
				},
				{
					topBtnName: this.$t("message.bhView.topBtnDownList.view"),
					type: "MS",
					downList: [
						{
							itemName: this.$t(
								"message.bhView.topBtnDownList.selectDisplayItems"
							),
							disableByResult: true,
							disabled: true,
						},
						{
							itemName: "経歴データ纏め方法",
							disabled: true,
						}
					]
				}
			],
			allInfo: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
			tabHeight: 600
		};
	},
	watch: {},
	methods: {
		changeRelaNum(num) {
			this.relaNum = num.length;
		}
	},
	created() { },
	mounted() {
		console.log(this.$route.query.id)
		this.tabHeight = $(".infoRow").height() - 180;
	},
	beforeDestroy() { },
	destroyed() { }
};
</script>
<style  lang="scss" scoped>
.warp {
	background: #F8F8F8;
	height: calc(100vh - 40px);
	padding: 15px 24px 0 24px;
}

.heaaderRow {
	color: #106EBE;
	border-bottom: 1px solid #D8D8D8;
	height: 40px;
	line-height: 40px;
}

.menuesRow {
	height: 48px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #D8D8D8;

	.leftView {
		width: 239px;
		display: flex;
		align-items: center;

		.headItem {
			min-width: 60px;
			text-align: center;
			margin-right: 2px;

			button {
				color: rgba(0, 0, 0, 0.65);
			}
		}

		::v-deep .el-input__inner {
			width: 224px;
			height: 24px;
			color: rgba(0, 0, 0, 0.65);
			background: #f8f8f8;
		}

		::v-deep .el-input__icon {
			line-height: 24px;
		}
	}

}

.infoRow {
	width: 100%;
	display: flex;
	height: 100%;

	.leftView {
		width: 239px;
		;
		height: calc(100% - 90px);
	}

	.rightView {
		width: calc(100% - 235px);
		height: calc(100% - 100px);
		padding-left: 25px;

		.tableMenuView {
			display: flex;
			align-items: center;
			padding: 14px 0;

			* {
				margin-right: 20px;
			}

			::v-deep .el-input__inner {
				height: 24px;
				background: #FFF;
			}

			::v-deep .el-input__icon {
				line-height: 24px;
			}

			.ipt_shot {
				width: 50px;
			}

			.ipt_long {
				width: 150px;
			}

			.el-icon-search {
				width: 24px;
				height: 24px;
				border-radius: 4px;
				border: 1px solid #d9d9d9;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
			}

			.iconfont {
				cursor: pointer;
			}
		}

		.tableBottom {
			background: #e9e9e9;
			height: 30px;
			line-height: 30px;
			padding-left: 15px;
		}
	}
}

::v-deep .elx-filter--btn {
	transform: translateX(18px);
}
</style>
